{include file="public/header" /}
<style type="text/css">
    #container {
        min-width: 100px;
        min-height: 600px;
    }
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=2AEBZ-YK23W-XISR6-ROOGV-VOLI7-46FFT"></script>

<body style="background-color: #ffffff">
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>商家名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="title" name="title" required="" lay-verify="required" autocomplete="off"
                            class="layui-input" value="{$row.title|default=''}" placeholder="" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>商家账号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="account" name="account" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.account|default=''}" placeholder=""
                            disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        状态</label>
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="required" lay-filter="type">
                            <option value="1" {if !empty($row.status) && $row.status==1}selected{/if}>正常</option>
                            <option value="2" {if !empty($row.status) && $row.status==2}selected{/if}>冻结</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        商家密码</label>
                    <div class="layui-input-inline">
                        <input type="password" id="password" name="password" autocomplete="on" class="layui-input"
                            placeholder="">
                    </div>
                    <div>填写空表示不更改密码，新增账户必须填写密码</div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>配送范围:公里</label>
                    <div class="layui-input-inline">
                        <input type="number" id="ranges" name="ranges" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.ranges|default='0'}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>起送价:元</label>
                    <div class="layui-input-inline">
                        <input type="number" id="startsend" name="startsend" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.startsend|default='0'}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        地图搜索</label>
                    <div class="layui-input-block" style="width: 60%;">
                        <input type="text" id="posaddress" name="posaddress" autocomplete="on" class="layui-input"
                            value="" placeholder="搜索列表如果有偏差，请手动选择较近位置再进行地图校准">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" id="sousuo">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>商家位置选择[如地图不显示，请选用Google浏览器]</label>
                    <div class="layui-input-block" style="width: 80%;">
                        <div id="container"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <input type="hidden" value="{$row.id|default=''}" name="id">
                    <input type="hidden" value="{$row.lat|default='0'}" name="lat">
                    <input type="hidden" value="{$row.lon|default='0'}" name="lon">
                    <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="layui-btn layui-btn-primary" onclick="IframeClose()">取消</button>

                </div>
            </form>
        </div>
    </div>

    {include file="public/footer" /}
    <script src="/static/leyedit/Layui-KnifeZ/layui.all.js"></script>
    <script src="/static/leyedit/ace/ace.js"></script>
    <script>


    </script>
    <script>
        layui.use(['layer', 'jquery', 'form'], function () {
            $ = layui.jquery;
            var form = layui.form
                , layer = layui.layer;
            //腾讯地图部分
            var position = document.getElementById("position");
            var center = new qq.maps.LatLng("{$row.lat|default='0'}", "{$row.lon|default='0'}");//设置中心点坐标
            //初始化地图
            var map = new qq.maps.Map("container", {
                center: center,
                zoom: 17,
                viewmode: '3D',
                pitch: 50
            });
            //初始化infoWindow
            var infoWindow = new qq.maps.InfoWindow({
                map: map
            });
            infoWindow.open();
            infoWindow.setContent("{$row.title|default='无'}");
            infoWindow.setPosition(map.getCenter());
            //点击事件
            qq.maps.event.addListener(map, 'click', function (evt) {
                var shopname = $("input[name='title']").val();
                var lat = evt.latLng.getLat().toFixed(8);
                var lng = evt.latLng.getLng().toFixed(8);
                var center = new qq.maps.LatLng(lat, lng);//设置中心点坐标
                infoWindow.setPosition(center);
                infoWindow.setContent(shopname);
                $("input[name='lat']").val(lat);
                $("input[name='lon']").val(lng);
            });
            //输入框的值改变时触发
            $("#posaddress").on("input", function (e) {
                var title = e.delegateTarget.value;
                $.ajax({
                    type: 'get',
                    url: '/base/getaddress',
                    data: { keyword: title },
                    success: function (res) {
                        if (res.code == 0) {
                            str = '';
                            $.each(res.data, function (i, obj) {
                                if (i < 5) {
                                    str += '<input lay-filter="getsou" type="radio" name="suosuo" value="' + obj.location.lat + ',' + obj.location.lng + '" title="' + obj.title + '[' + obj.address + ']' + '"><br/>';
                                }
                            });
                            $('#sousuo').html(str);
                            form.render();
                        }
                    }
                });
                return false;
            });
            //监听专业修改信息
            form.on('radio(getsou)', function (data) {
                var location = data.value.split(","); //字符分割 
                var shopname = $("input[name='title']").val();
                var center = new qq.maps.LatLng(location[0], location[1]);//设置中心点坐标
                map.setCenter(center);
                infoWindow.setPosition(center);
                infoWindow.setContent(shopname);
                $("input[name='lat']").val(location[0]);
                $("input[name='lon']").val(location[1]);
            });
            //监听提交
            form.on('submit(add)', function (data) {
                $.ajax({
                    'type': 'post',
                    data: data.field,
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
                return false;
            });
        });
    </script>

</body>

</html>